import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Button, CheckBox, Icon } from 'react-native-tengits-elements';
import Swiper from 'react-native-tengits-swiper';
import { TText } from '../../common/Widgets/WidgetDefault';
import _ from 'lodash';
import { scaleSize } from '../../common/Utils/ToolUtils';
import { Colors, FontSize } from '../../common/Theme/TTheme';
import { DeviceChangeItem } from './SubItemComponent';
import { onlineStatus } from '../../logic/LogicConstant';

export const OverlayGateSelectList = (props) => {
  const CHUNKGROUP = 5;
  const [index, setIndex] = useState(props.index);
  const [page, setPage] = useState(Math.floor(props.index/CHUNKGROUP||0));
  const chunk_data = _.chunk(props.data, CHUNKGROUP);
  //const groupPage = Math.ceil(((props.data||[]).length)/CHUNKGROUP);
  //const maxPage = Math.max(0, groupPage-1);
  return (
        <View style={{flex:1, flexDirection:'column', backgroundColor:Colors.white}}>
            <View style={styles.header}>
                <Text style={{fontSize: FontSize.h3_font, color: Colors.white}}>{"切换设备"}</Text>
                <Button 
                    containerStyle={{position:'absolute', top:0, right:0}}
                    buttonStyle={{backgroundColor:'transparent', width:scaleSize(117), height:scaleSize(88)}} 
                    icon={<Icon name='close' color={Colors.white} size={scaleSize(40)}/>}
                    onPress={()=>{
                        props.toggleOverlay && props.toggleOverlay("GateSelect");
                }}/>
            </View>
            <View style={{flex:1, flexDirection:'column', paddingVertical: scaleSize(40)}}>
                <View style={{flex:1, flexDirection:'row', alignItems:'center'}}>
                {/* <Button buttonStyle={{width:80, height:40}} title={"前一页"} onPress={()=>{
                        setPage(Math.max(0, page-1));
                    }}/> */}
                <Swiper index={page} showsButtons={true} 
                        loop={false} autoplay={false} 
                        showsPagination={false} 
                        scrollEnabled={false}
                        buttonWrapperStyle={{paddingHorizontal:0}}
                        prevButton={<Icon size={scaleSize(40)} name='chevron-left' type='font-awesome' containerStyle={styles.pageBtn} color={Colors.button_color}/>}
                        nextButton={<Icon size={scaleSize(40)} name='chevron-right' type='font-awesome' containerStyle={styles.pageBtn} color={Colors.button_color}/>}
                        >
                    {chunk_data.map((item, id)=>{
                        return <View key={"Device"+id} style={{paddingHorizontal:scaleSize(100)}}>
                            {item.map((it, i)=>{
                                return <DeviceChangeItem key={"ck" + id + i}
                                        callback = {(data,j)=>{
                                            setIndex(j);
                                            props.onSure && props.onSure("GateSelect", j);
                                        }}
                                        onlineStatus={it.onlineStatus == onlineStatus.ONLINE}
                                        checkedIndex={index}
                                        isLocal={props.localIndex == id * CHUNKGROUP + i}
                                        item={it} 
                                        index={id * CHUNKGROUP + i}/>
                            })}
                        </View>
                    })}    
                </Swiper>
                {/* <Button buttonStyle={{width:80, height:40,}} title={"后一页"} onPress={async()=>{
                        setPage(Math.min(maxPage, page+1));
                    }}/> */}
                </View>
                {/* <View style={{marginTop:scaleSize(20), flexDirection:'row', alignItems:'flex-end', justifyContent:'center'}}>
                    <Button buttonStyle={{paddingVertical:0, width:scaleSize(260), height:scaleSize(62), backgroundColor: Colors.button_cancel_color}} 
                        titleStyle={{color:Colors.text1_color, fontSize:FontSize.h4_font}}
                        title={"取消"} 
                        onPress={()=>{
                        props.toggleOverlay && props.toggleOverlay("GateSelect");
                    }}/>
                    <Button buttonStyle={{paddingVertical:0, width:scaleSize(260), height:scaleSize(62), marginLeft:scaleSize(30), backgroundColor: Colors.button_color}}
                        titleStyle={{fontSize:FontSize.h4_font}}
                        title={"确定"} onPress={async()=>{
                        props.onSure && props.onSure("GateSelect", index);
                    }}/>
                </View> */}
            </View>
        </View>
  );
};

const styles = StyleSheet.create({
    header:{
        flexDirection: 'row',
        height: scaleSize(88),
        backgroundColor: Colors.navibar_color,
        alignItems:'center',
        justifyContent:'center'
    },
    pageBtn:{
        alignItems:'center',
        justifyContent:'center',
        width:scaleSize(100), 
        height:scaleSize(200),
    }
});